<template>
  <div class="shortcut-settings">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">快捷键设置</h1>
        <div class="status-badges">
          <el-tag type="primary" class="total-badge">
            <el-icon><Check /></el-icon>
            快捷键总数: {{ shortcuts.length }}
          </el-tag>
        </div>
      </div>
      
      <div class="header-actions">
        <!-- 保存设置 -->
        <el-button 
          type="primary" 
          :icon="Check" 
          @click="saveSettings"
          :loading="saving"
        >
          保存设置
        </el-button>
        
        <!-- 重置设置 -->
        <el-button 
          :icon="Refresh" 
          @click="resetSettings"
        >
          重置设置
        </el-button>
        
        <!-- 刷新数据 -->
        <el-button 
          :icon="Refresh" 
          @click="loadShortcuts"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- 快捷键列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <span>快捷键列表</span>
          <div class="table-actions">
            <el-button type="primary" :icon="Plus" @click="addShortcut">
              添加快捷键
            </el-button>
          </div>
        </div>
      </template>

      <el-table
        :data="shortcuts"
        v-loading="loading"
        class="shortcuts-table"
      >
        <!-- 快捷键类型 -->
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getShortcutTypeTag(row.type)">
              {{ getShortcutTypeName(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <!-- 模块 -->
        <el-table-column prop="moduleId" label="模块" width="150" />
        
        <!-- 操作 -->
        <el-table-column prop="action" label="操作" width="150" />
        
        <!-- 快捷键 -->
        <el-table-column prop="key" label="快捷键" width="150">
          <template #default="{ row }">
            <kbd class="shortcut-key">{{ row.key }}</kbd>
          </template>
        </el-table-column>
        
        <!-- 描述 -->
        <el-table-column prop="description" label="描述" min-width="200" />
        
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button 
              size="small" 
              type="primary" 
              @click="editShortcut(row)"
            >
              编辑
            </el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="deleteShortcut(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑快捷键对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      :title="editingShortcut.id ? '编辑快捷键' : '添加快捷键'"
      width="500px"
    >
      <el-form :model="editingShortcut" label-width="80px">
        <el-form-item label="类型">
          <el-select v-model="editingShortcut.type" placeholder="请选择类型" style="width: 100%">
            <el-option label="全局" value="global" />
            <el-option label="页面" value="page" />
            <el-option label="模块" value="module" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="模块">
          <el-input v-model="editingShortcut.moduleId" placeholder="请输入模块ID" />
        </el-form-item>
        
        <el-form-item label="操作">
          <el-input v-model="editingShortcut.action" placeholder="请输入操作" />
        </el-form-item>
        
        <el-form-item label="快捷键">
          <el-input 
            v-model="editingShortcut.key" 
            placeholder="请输入快捷键组合"
            @keydown="handleKeyInput"
          />
          <div class="form-tip">按住组合键并在输入框中按下相应按键</div>
        </el-form-item>
        
        <el-form-item label="描述">
          <el-input 
            v-model="editingShortcut.description" 
            type="textarea"
            :rows="2"
            placeholder="请输入描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveShortcutEdit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { ref, onMounted } from '@vue/runtime-core'
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Check, Refresh, Plus
} from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/appStore'
// @ts-ignore
import { useShortcutSettings } from '@/composables/useShortcutSettings'

// Store
const appStore = useAppStore()

// 使用快捷键设置composable
// @ts-ignore
const {
  // 数据
  loading,
  saving,
  shortcuts,
  editDialogVisible,
  editingShortcut,
  
  // 方法
  loadShortcuts,
  editShortcut,
  handleKeyInput,
  saveShortcutEdit,
  saveSettings,
  resetSettings
} = useShortcutSettings()

// 添加快捷键
const addShortcut = () => {
  // @ts-ignore
  editingShortcut.value = {
    id: 0,
    userId: 0,
    type: 'global',
    moduleId: null,
    key: '',
    action: '',
    description: ''
  }
  editDialogVisible.value = true
}

// 删除快捷键
const deleteShortcut = async (shortcut: any) => {
  try {
    await ElMessageBox.confirm(`确定要删除快捷键 "${shortcut.key}" 吗？`, '删除快捷键', {
      type: 'warning'
    })
    
    const index = shortcuts.value.findIndex((s: any) => s.id === shortcut.id)
    if (index !== -1) {
      shortcuts.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + (error.message || '未知错误'))
    }
  }
}

// 工具函数
const getShortcutTypeTag = (type: string) => {
  const typeMap: Record<string, any> = {
    global: 'primary',
    page: 'success',
    module: 'warning'
  }
  return typeMap[type] || 'info'
}

const getShortcutTypeName = (type: string) => {
  const nameMap: Record<string, string> = {
    global: '全局',
    page: '页面',
    module: '模块'
  }
  return nameMap[type] || type
}

// 生命周期
onMounted(() => {
  appStore.setPageTitle('快捷键设置')
  loadShortcuts()
})
</script>

<style scoped lang="scss">
.shortcut-settings {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
  min-height: 100vh;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    
    .header-left {
      .page-title {
        margin: 0 0 12px 0;
        font-size: 24px;
        font-weight: 600;
        color: #1f2d3d;
      }
      
      .status-badges {
        display: flex;
        gap: 12px;
        
        .el-tag {
          display: flex;
          align-items: center;
          gap: 4px;
          font-weight: 500;
        }
      }
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .shortcuts-table {
      .shortcut-key {
        padding: 4px 8px;
        background-color: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-family: monospace;
        font-size: 12px;
      }
    }
  }
  
  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .shortcut-settings {
    padding: 16px;
    
    .page-header {
      flex-direction: column;
      gap: 16px;
      
      .status-badges {
        flex-wrap: wrap;
      }
      
      .header-actions {
        flex-wrap: wrap;
        justify-content: center;
      }
    }
  }
}
</style>